<include file="Public/header" />
<include file="Public/menu" />

<link rel="stylesheet" href="/Public/admin/adminlte/bootstrap/css/bootstrap-switch.min.css">
<link href="__PUBLIC__/admin/printer/css/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<link href="__PUBLIC__/admin/printer/css/bootstrap.css" rel="stylesheet" type="text/css" />

<!-- 加载打印预览-->

<!-- 加载jq-->
<script src='__PUBLIC__/admin/printer/js/jquery-1.10.2.min.js'></script>
<script src='__PUBLIC__/admin/printer/js/jquery-ui.min.js'></script>
<style>
    /* wrap */
    .warp{
        width:99%;
        padding: 15px;
        height: auto;
    }
    .set{
        position:relative;
        width: 100%;
        height: auto;
        overflow: hidden;
        padding: 15px 0;
        display: flex;
        background: -webkit-linear-gradient(rgba(31, 130, 38, 0.48), #6d9870); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(rgba(31, 130, 38, 0.48), #6d9870);; /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(rgba(31, 130, 38, 0.48), #6d9870); /* Firefox 3.6 - 15 */
        background: linear-gradient(rgba(31, 130, 38, 0.48), #6d9870); /* 标准的语法 */
    }

    .select-wrapper{
        margin: 0 15px;
        height: 28px;
        overflow: hidden;
    }
    .select-wrapper .label{
        font-size: 13px;
        height: 28px;
        overflow: hidden;
        line-height:28px ;
    }
    .select-wrapper select{
        font-size: 13px;
        height: 28px;
    }
    .select-wrapper input[type=text]{
        font-size: 13px;
        padding-left: 12px;
        height: 28px;
        overflow: hidden;
        line-height:28px ;
    }
    .select-wrapper input[type=checkbox]{
       position: relative;
        top:3px;
    }
    .imgUplod{
        display: block;
        position: relative;
    }
    .imgUplod .label{
        display: block;
        float: left;
        font-size: 13px;
        margin-top: 5px;
    }
    .imgUplod .a-upload {
        padding: 4px 10px;
        height: 28px;
        line-height: 20px;
        position: relative;
        cursor: pointer;
        color: #888;
        background: #fafafa;
        border: 1px solid #ddd;
        border-radius: 4px;
        overflow: hidden;
        display: inline-block;
        *display: inline;
        *zoom: 1
    }

    .imgUplod .a-upload  input {
        position: absolute;
        font-size: 13px;
        right: 0;
        top: 0;
        opacity: 0;
        filter: alpha(opacity=0);
        cursor: pointer
    }

    .imgUplod .a-upload:hover {
        color: #444;
        background: #eee;
        border-color: #ccc;
        text-decoration: none
    }


    .order-content{
        position:relative;
        width:100%;
        height:500px;
        overflow: hidden;
        border:1px solid #1B6D85;
        padding: 15px;
        margin-bottom: 15px;
        background: -webkit-linear-gradient(180deg,rgba(179, 236, 223, 0.48), rgba(159, 216, 169, 0.23)); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(180deg,rgba(179, 236, 223, 0.48), rgba(159, 216, 169, 0.23));/* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(180deg,rgba(179, 236, 223, 0.48), rgba(159, 216, 169, 0.23)); /* Firefox 3.6 - 15 */
        background: linear-gradient(180deg,rgba(179, 236, 223, 0.48), rgba(159, 216, 169, 0.23)); /* 标准的语法 */
    }
    .upload_pic{
        position: absolute;
        right:-90px;
        top:0;
        padding: 4px 10px;
        height: 28px;
        line-height: 20px;
        cursor: pointer;
        color: #888;
        background: #fafafa;
        border: 1px solid #ddd;
        border-radius: 4px;
        overflow: hidden;
        display: inline-block;
        *display: inline;
        *zoom: 1
    }
</style>

<!-- 内容页 -->
<div class="content-wrapper">
    <div class="warp">
        <div id='set' class="set">
            <div id='select-wrapper' class="select-wrapper">
                <span class="label">添加快递单信息:</span>
                <select id='select'>
                    <option data-id=0   value=''>添加打印选项</option>
                    <volist name="data" id='Item'>
                        <option data-id={$i} value='{$key}' data-title="{$Item}">{$Item}</option>
                    </volist>
                </select>
            </div>
            <div class="select-wrapper">
                <span class="label">快递单名称:</span>
                <input type='text' id="prt_tmpl_title" value="{$ss['prt_tmpl_title']}">
            </div>
            <div class="select-wrapper">
                <span class="label">是否启用:</span>
                <input type="checkbox" value="true" id="shortcut" <if condition="$ss['shortcut'] eq 'true'"> checked="checked" </if> />
            </div>

            <div class="imgUplod">
                <span class="label">上传快递单背景图:</span>
                 <a href="javascript:;" class="a-upload"><input type="file" name="" id='choose-pic'>添加图片</a>
                 <a id="upload_pic" class="upload_pic" href="javascript:void(0)">上传图片</a>
                 <input type="hidden" name="pic_url" value="{$ss['pic_url']}" id="isUP">
            </div>
        </div>

        <input type="hidden" value="{$ss['prt_tmpl_id']}" name="prt_tmpl_id" id="is_tmpl_id"/>
        <if condition="$ss['prt_tmpl_data'] neq ''">
            <input type="hidden" value='{$ss["prt_tmpl_data"]}'  id="isxr"/>
        </if>
         <div id='content' class='ui-widget-content order-content' style="width: {$ss['prt_tmpl_width']}px; height: {$ss['prt_tmpl_height']}px;background-image: url('{$ss[\"pic_url\"]}'); background-size: cover;">
    </div>
    <a id='submit-info' class="btn btn-default" href='javascript:void(0)'>保存</a>
    <!--<a id='preview' class="btn btn-default" href='javascript:void(0)'>预览</a>-->

</div>

</div>
<!-- 底部 -->
<include file="Public/common_footer" />
<script src="__PUBLIC__/admin/adminlte/bootstrap/js/bootstrap-switch.min.js"></script>
<script>
    $(function(){
        $('#upload_pic').on('click',function(){
            var file=$('#choose-pic')[0].files;
            if(file.length==0){
                alert('请选择图片');
                return;
            }
            var fileUpload=file[0];
            var fd=new FormData();
            fd.append('fileUpload',fileUpload);
            $.ajax({
                url:'/Admin/Upload/index',
                type:'post',
                data:fd,
                contentType:false,
                processData:false,
                success:function(data){
                  var  datanew= eval("("+ data +")");
                    console.log(datanew);
                    var path='/Uploads/'+datanew;
                    //重新调用的话，图片显示不出来
                    $("#content").css({"background-image":"url("+path+")","background-size":"cover"});
                    $("#isUP").val(path);
                },
                error:function(){
                    alert('文件上传失败');
                }
            })
        })

        var i=0;

        var isxr = $('#isxr').val();

        if(isxr != null){
            //渲染

            //console.log(isxr);
           var Xr = JSON.parse(isxr);
          // console.log(Xr);

            for(var i1=0;i1<Xr.length;i1++){
                    //console.log(Xr[i1]+'/////');
                    var oDiv=$('<div>').addClass('info').data('keyword',Xr[i1]['keyword']).data('index',i++).data('id',$('option:selected',this).data('id')).addClass('ui-widget-content').appendTo('#content').resizable().draggable({containment: "#content"}).css({'min-width':'200px','min-height':'32px','padding':'5px','z-index':'','position':'absolute'});
                    oDiv.css({'width':Xr[i1]['width']+'px','height':Xr[i1]['height'],'top':Xr[i1]['y']+'px','left':Xr[i1]['x']+'px'});
                    //console.log($Xr[i]['keyword']);
                    var oKey=$('<span>').addClass('key-name').text(Xr[i1]['keyname']).appendTo(oDiv);
                    if(Xr[i1]['bold']=='true'){
                        oKey.css({'font-weight':'bold'});
                    }
                    oKey.css({'font-size':Xr[i1]['size']});

                  //  $('#content').css({'width':})

                    $('<a>').addClass('info-edit').text('编辑').css({'font-size':'12px','position':'absolute','right':'10px','top':'5px'}).attr('href','javascript:void(0)').appendTo(oDiv);

                    var oEditBox=$('<div>').addClass('edit-box').css({'padding':'12px 12px','height':'200px','border':'1px solid #ddd','z-index':'9','position':'absolute','position':'absolute','right':'-200px','top':'0px','background':'#fff'}).hide().appendTo(oDiv);

                    var oSize=$('<div>').css({'width':'100%','padding':'5px 0','margin-top':'30px'}).appendTo(oEditBox);
                    $('<span>').text('字体大小：').appendTo(oSize);

                    $('<input type="number">').addClass('size-num').css({'border':'1px solid #ddd','width':'55px','padding':'0 0 0 5px','margin-right':'5px'}).val(Xr[i1]['size']).appendTo(oSize);
                    $('<span>').text('px').appendTo(oSize);

                    var oFont=$('<div>').css({'width':'100%','padding':'5px 0',}).appendTo(oEditBox);
                    $('<span>').text('字体样式：').appendTo(oFont);
                    var oFontSelect=$('<select>').addClass('font-style').appendTo(oFont);
                    $('<option>').val('SimSun').text('宋体').appendTo(oFontSelect);
                    $('<option>').val('SimHei').text('黑体').appendTo(oFontSelect);
                    $('<option>').val('FangSong').text('仿宋').attr('selected',true).appendTo(oFontSelect);
                    $('<option>').val('KaiTi').text('楷体').appendTo(oFontSelect);
                    $('<option>').val('Microsoft YaHei').text('微软雅黑体').appendTo(oFontSelect);

                    var oBold=$('<div>').css({'width':'100%','padding':'5px 0',}).appendTo(oEditBox);
                    $('<span>').text('是否加粗：').appendTo(oBold);
                    $('<input type="checkbox">').addClass('is-bold').attr('checked',true).appendTo(oBold);
                    $('<a>').addClass('info-remove btn btn-sm btn-default').text('移除该项').css({'position':'absolute','bottom':'12px','left':'67px'}).attr('href','javascript:void(0)').appendTo(oEditBox);
                    $('<img src="__PUBLIC__/admin/printer/images/iconClose.png" />').attr('href','javascript:void(0)').addClass('cancel-edit').css({'position':'absolute','top':'12px','right':'12px','width':'15px','height':'15px','cursor': 'pointer'}).appendTo(oEditBox);
                    $('<a>').attr('href','javascript:void(0)').addClass('save-edit  btn btn-sm btn-default').css({'position':'absolute','bottom':'12px','left':'12px'}).text('保存').appendTo(oEditBox);

                    $(this).val('');

            }

        }
        $('#content').resizable();
        $('body').on('click','.info-remove',function(){
            $(this).parents('.info').remove();
            //console.log($(this).text());
        });
        $('body').on('click','.info-edit',function(){
            //console.log($(this).text());
            $(this).siblings('.edit-box').show();
        });
        $('body').on('click','.cancel-edit',function(){
            $(this).parent().hide();
        });

        $('body').on('click','.save-edit',function(){
            var size=$(this).parents('.edit-box').find('.size-num').val()+'px';
            var style=$(this).parents('.edit-box').find('.font-style').val();
            var bold=$(this).parents('.edit-box').find('.is-bold')[0].checked;
            //console.log(size+'/'+style+'/'+bold);

            $(this).parents('.info').find('.key-name').css({'font-family':style,'font-size':size});
            if(bold){
                $(this).parents('.info').find('.key-name').css('font-weight','bold');
            }
            $(this).parent().hide();
        });

        $('#select').val('');
        $('#select').on('change',function(){
            //生成一条信息
            //alert($('option:selected',this).data('id'));
            var $oDiv =$('<div>').addClass('info').data('keyword',$(this).val()).data('index',i++).data('id',$('option:selected',this).data('id')).addClass('ui-widget-content').appendTo('#content').resizable().draggable({containment: "#content"}).css({'min-width':'200px','min-height':'32px','padding':'5px','position':'absolute'});
            var $oKey=$('<span>').addClass('key-name').text($('option:selected',this).text()).appendTo($oDiv);

            $('<a>').addClass('info-edit').text('编辑').css({'font-size':'12px','position':'absolute','right':'10px','top':'5px'}).attr('href','javascript:void(0)').appendTo($oDiv);

            var $oEditBox=$('<div>').addClass('edit-box').css({'padding':'12px 12px','height':'200px','border':'1px solid #ddd','position':'absolute','right':'-200px','top':'0px','background':'#fff'}).hide().appendTo($oDiv);

            var $oSize=$('<div>').css({'width':'100%','padding':'5px 0','margin-top':'30px'}).appendTo($oEditBox);
            $('<span>').text('字体大小：').appendTo($oSize);
            $('<input type="number">').addClass('size-num').css({'border':'1px solid #ddd','width':'55px','padding':'0 0 0 5px','margin-right':'5px'}).val(12).appendTo($oSize);
            $('<span>').text('px').appendTo($oSize);

            var $oFont=$('<div>').css({'width':'100%','padding':'5px 0',}).appendTo($oEditBox);
            $('<span>').text('字体样式：').appendTo($oFont);
            var $oFontSelect=$('<select>').addClass('font-style').css({'border':'1px solid #ddd'}).appendTo($oFont);
            $('<option>').val('SimSun').text('宋体').appendTo($oFontSelect);
            $('<option>').val('SimHei').text('黑体').appendTo($oFontSelect);
            $('<option>').val('FangSong').text('仿宋').attr('selected',true).appendTo($oFontSelect);
            $('<option>').val('KaiTi').text('楷体').appendTo($oFontSelect);
            $('<option>').val('Microsoft YaHei').text('微软雅黑体').appendTo($oFontSelect);

            var $oBold=$('<div>').css({'width':'100%','padding':'5px 0',}).appendTo($oEditBox);
            $('<span>').text('是否加粗：').appendTo($oBold);
            $('<input type="checkbox">').css({'border':'1px solid #ddd','width':'15px','height':'15px','position':'relative','top':'2px'}).addClass('is-bold').attr('checked',false).appendTo($oBold);

            $('<a>').addClass('info-remove btn btn-sm btn-default').text('移除该项').css({'position':'absolute','bottom':'12px','left':'67px'}).attr('href','javascript:void(0)').appendTo($oEditBox);
            $('<a> <img src="images/iconClose.png" />').attr('href','javascript:void(0)').addClass('cancel-edit').css({'position':'absolute','top':'5px','right':'12px','width':'15px','height':'15px'}).appendTo($oEditBox);
            $('<a>').attr('href','javascript:void(0)').addClass('save-edit  btn btn-sm btn-default').css({'position':'absolute','bottom':'12px','left':'12px'}).text('保存').appendTo($oEditBox);

            $(this).val('');
        });
        $('#submit-info').on('click',function(){
            var data=new Object();
            data['wrap']=new Object();
            data['info']=new Object();
            data['wrap']['width']=$('#content').width();
            data['wrap']['height']=$('#content').height();
            data['wrap']['prt_tmpl_id']=$('#is_tmpl_id').val();
            data['wrap']['pic_url']=$('#isUP').val();
            //console.log($('#is_tmpl_id').val());
            data['wrap']['prt_tmpl_title']=$('#prt_tmpl_title').val();
            data['wrap']['shortcut']=$(this).parents().find("input[type=checkbox]:checked").val();
            $('.info').each(function(idx){
                data['info'][idx]=new Object();
                data['info'][idx]['x']=$(this).position().left;
                data['info'][idx]['y']=$(this).position().top;
                data['info'][idx]['keyname']=$(this).find('.key-name').text();
                data['info'][idx]['keyword']=$(this).data('keyword');
                data['info'][idx]['width']=$(this).width();
                data['info'][idx]['height']=$(this).height();
                data['info'][idx]['size']=$(this).find('.key-name').css('font-size');
                data['info'][idx]['family']=$(this).find('.key-name').css('font-family');
                data['info'][idx]['bold']=($(this).find('.key-name').css('font-weight')=='bold')?'true':'false';
            })
            //console.log(data);
            $.ajax({
                url:'/admin/Delivery/savePrint',
                type:'post',
                dataType:'json',
                data:{'data':data},
                success:function(data){
                        alert(data.msg);
                },
                error:function(){
                    alert('保存失败');
                }
            })
        });
        $('#preview').on('click',function(){
           
        })


    })
</script>